// import React, { useState } from 'react'
// import { Form, Input, Button, Radio, Select } from 'antd';
// import { InfoCircleOutlined } from '@ant-design/icons';
// import './addUser.less'
// type RequiredMark = boolean | 'optional';
// const addConsumer: React.FC = () => {
//     const [form] = Form.useForm(); const [form1] = Form.useForm();
//     const [requiredMark, setRequiredMarkType] = useState<RequiredMark>('optional');
//     type LayoutType = Parameters<typeof Form>[0]['layout'];
//     const [formLayout, setFormLayout] = useState<LayoutType>('horizontal');
//     const onFormLayoutChange = ({ layout }: { layout: LayoutType }) => {
//         setFormLayout(layout);
//     };
//     const tailLayout = {
//         wrapperCol: { offset: 1, span: 22 },
//     };

//     const { Option } = Select;
//     // const onRequiredTypeChange = ({ requiredMark }: { requiredMark: RequiredMark }) => {
//     //     setRequiredMarkType(requiredMark);
//     // };
//     const onResetOne = () => {
//         form1.resetFields();
//     }

    
//     return <div className='wrap'>
//         <h3>添加用户</h3>
//         <div>
//             <Form
//                 form={form}
//                 name="control-hooks" onValuesChange={onFormLayoutChange} layout={formLayout} initialValues={{ layout: formLayout }}
//             >
//                 <Form.Item>
//                     <Radio.Group>
//                         <Radio.Button value="horizontal">添加用户</Radio.Button>
//                         <Radio.Button value="vertical">更新用户</Radio.Button>
//                     </Radio.Group>
//                 </Form.Item>
//                 <Form.Item {...tailLayout}>
//                     <Input placeholder="请输入用户名" />
//                 </Form.Item>
//                 <Form.Item {...tailLayout}>
//                     <Input placeholder="请输入密码" />
//                 </Form.Item>
//                 {
//                     formLayout === "vertical" ? <Form.Item name='paw' {...tailLayout}>
//                         <Input />
//                     </Form.Item> : null
//                 }
//                 <Form.Item>
//                     <Select placeholder='请选择身份id'>
//                         <Option value='管理员'>管理员</Option>
//                         <Option value='出题者'>出题者</Option>
//                         <Option value='浏览者'>浏览者</Option>
//                     </Select>
//                 </Form.Item>
//                 <Form.Item >
//                     <Button type="primary" htmlType="submit">确认</Button>
//                     <Button htmlType="button" onClick={onResetOne}>
//                         重置
//                             </Button>
//                 </Form.Item>
//             </Form>
//         </div>
//     </div>
// }
// export default addConsumer


import React, { useEffect, useState } from 'react'
import styles from "./addConsumer.less"
import { Select, Form, Input, Button, message, Radio } from 'antd';
const addConsumer: React.FC = () => {
    const [form1] = Form.useForm();
    const [form2] = Form.useForm();
    const [form3] = Form.useForm();
    const [form4] = Form.useForm();
    const [form5] = Form.useForm();
    const [form6] = Form.useForm();
    type LayoutType = Parameters<typeof Form>[0]['layout'];
    const [formLayout, setFormLayout] = useState<LayoutType>('horizontal');
    const onFormLayoutChange = ({ layout }: { layout: LayoutType }) => {
        setFormLayout(layout);
    };
    const tailLayout = {
        wrapperCol: { offset: 1, span: 22 },
    };
    const { Option } = Select;
    const onResetOne = () => {
        form1.resetFields();
    }
    function onResetTwo() {
        form2.resetFields();
    }
    function onResetThree() {
        form3.resetFields();
    }
    function onResetFour() {
        form4.resetFields();
    }
    function onResetFive() {
        form5.resetFields();
    }
    function onResetSix() {
        form6.resetFields();
    }
    function onFinish1(value: any) {
        console.log(value)
    }
    return <div className={styles.wrap}>
        <h1>添加用户</h1>
        <div className={styles.box}>
            <div>
                <div>
                    <Form form={form1} onFinish={onFinish1} name="control-hooks" onValuesChange={onFormLayoutChange} layout={formLayout} initialValues={{ layout: formLayout }}>
                        <Form.Item name="layout" className={styles.header} >
                            <Radio.Group value={formLayout}>
                                <Radio.Button value="horizontal" className={styles.radio}>添加用户</Radio.Button>
                                <Radio.Button value="vertical" className={styles.radio}>更新用户</Radio.Button>
                            </Radio.Group>
                        </Form.Item>
                        <Form.Item name='user' {...tailLayout}>
                            <Input />
                        </Form.Item>
                        <Form.Item name='paw' {...tailLayout}>
                            <Input />
                        </Form.Item>
                        {
                            formLayout === "vertical" ? <Form.Item name='paw' {...tailLayout}>
                                <Input />
                            </Form.Item> : null
                        }
                        <Form.Item name='id' {...tailLayout}>
                            <Select>
                                <Option value='管理员'>管理员</Option>
                                <Option value='出题者'>出题者</Option>
                                <Option value='浏览者'>浏览者</Option>
                            </Select>
                        </Form.Item>
                        <Form.Item >
                            <Button className={styles.sub} type="primary" htmlType="submit">确认</Button>
                            <Button htmlType="button" onClick={onResetOne} className={styles.reset}>
                               重置
                            </Button>
                        </Form.Item>
                    </Form>
                </div>
                <div>
                    <Form form={form2} initialValues={{ layout: formLayout }}>
                    <Form.Item name="layout" className={styles.header} >
                            <Radio.Group value={formLayout}>
                                <Radio.Button value="horizontal" className={styles.radio}>添加身份</Radio.Button>
                            </Radio.Group>
                        </Form.Item>
                        <Form.Item name='user' {...tailLayout}>
                            <Input />
                        </Form.Item>
                        <Button className={styles.sub} type="primary" htmlType="submit">确认</Button>
                        <Button htmlType="button" onClick={onResetTwo} className={styles.reset}>
                           重置
                    </Button>
                    </Form>
                </div>
                <div>
                    <Form form={form3} initialValues={{ layout: formLayout }}>
                    <Form.Item name="layout" className={styles.header} >
                            <Radio.Group value={formLayout}>
                                <Radio.Button value="horizontal" className={styles.radio}>添加api接口权限</Radio.Button>
                            </Radio.Group>
                        </Form.Item>
                        <Form.Item name='user' {...tailLayout}>
                            <Input />
                        </Form.Item>
                        <Form.Item name='pwd' {...tailLayout}>
                            <Input />
                        </Form.Item>
                        <Form.Item name='name' {...tailLayout}>
                            <Input />
                        </Form.Item>
                        <Button className={styles.sub} type="primary" htmlType="submit">确认</Button>
                        <Button htmlType="button" onClick={onResetThree} className={styles.reset}>
                           重置
                        </Button>
                    </Form>
                </div>
            </div>
            <div>
                <div>
                    <Form form={form4}>
                    <Form.Item name="layout" className={styles.header} >
                            <Radio.Group value={formLayout}>
                                <Radio.Button value="horizontal" className={styles.radio}>添加视图接口权限</Radio.Button>
                            </Radio.Group>
                        </Form.Item>
                        <Form.Item name='id' {...tailLayout}>
                            <Select>
                                <Option value='管理员'>管理员</Option>
                                <Option value='出题者'>出题者</Option>
                                <Option value='浏览者'>浏览者</Option>
                            </Select>
                        </Form.Item>
                        <Button className={styles.sub} type="primary" htmlType="submit">确认</Button>
                        <Button htmlType="button" onClick={onResetFour} className={styles.reset}>
                           重置
                    </Button>
                    </Form>
                </div>
                <div>
                    <Form form={form5}>
                    <Form.Item name="layout" className={styles.header} >
                            <Radio.Group value={formLayout}>
                                <Radio.Button value="horizontal" className={styles.radio}>给身份api接口权限</Radio.Button>
                            </Radio.Group>
                        </Form.Item>
                        <Button className={styles.sub} type="primary" htmlType="submit">确认</Button>
                        <Button htmlType="button" onClick={onResetFive} className={styles.reset}>
                           重置
                    </Button>
                    </Form>
                </div>
                <div>
                    <Form form={form6}>
                    <Form.Item name="layout" className={styles.header} >
                            <Radio.Group value={formLayout}>
                                <Radio.Button value="horizontal" className={styles.radio}>给身份视图设置权限</Radio.Button>
                            </Radio.Group>
                        </Form.Item>
                        <Button className={styles.sub} type="primary" htmlType="submit">确认</Button>
                        <Button htmlType="button" onClick={onResetSix} className={styles.reset}>
                           重置
                    </Button>
                    </Form>
                </div>
            </div>
        </div>
    </div>
}
export default addConsumer